<template>
  <van-nav-bar
    fixed
    :placeholder="placeholder"
    @click-left="back"
    :left-arrow="isArrow"
    safe-area-inset-top
    :title="ftitle"
    z-index="99"
  >
    <template #right>
      <slot name="top"></slot>
    </template>
  </van-nav-bar>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { computed } from "vue";
import { useAppStore } from "@/store/useAppStore";
const appStore = useAppStore();
const { getTitle } = appStore;
const route = useRoute();
const router = useRouter();
// const emit = defineEmits(['selfBack'])
const isArrow = computed(() => {
  if (route.matched && route.matched[0]) {
    let is = route.matched[0].meta && route.matched[0].meta.back;
    return is as any;
  } else {
    return false;
  }
});
const placeholder = computed(() => {
  if (route.matched && route.matched[0]) {
    if (route.matched[0].meta.placeholder === false) {
      return false;
    } else {
      return true;
    }
  } else {
    return false;
  }
});

const ftitle = computed(() => {
  let title = getTitle();
  if (title) {
    return title;
  } else {
    if (route.matched && route.matched[0]) {
      // console.log("路由title有值");
      return route.matched[0].meta.title as any;
    } else {
      // console.log("路由title无值");
      return "";
    }
  }
});
const back = () => {
  router.back();
};
</script>

<style lang="scss" scoped>
:deep(.van-nav-bar__content) {
  background-color: #0e50a5;
}

:deep(.van-icon-arrow-left) {
  color: white;
}

:deep(.van-nav-bar__title) {
  color: white;
}
</style>
